<template>
  <div
    class="my-info"
    style="
      background: url('https://butvan-blog.oss-cn-beijing.aliyuncs.com/12d1ba6f-ea4f-4dec-bd70-950e4002a1cd.jpg');
    "
  >
    <div class="header">
      <van-image
        class="avator"
        round
        fit="cover"
        width="3.5rem"
        height="3.5rem"
        src="https://butvan-blog.oss-cn-beijing.aliyuncs.com/0195a0bc-839d-4070-a85f-031512cc9331.jpeg"
      ></van-image>
      <div class="info">
        <div class="top">
          <div class="label">
            昵称: <span class="value">{{ myInfo.name }}</span>
          </div>
          <div class="label">
            性别: <span class="value">{{ myInfo.sex === 1 ? '男' : '女' }}</span>
          </div>
        </div>
        <div class="bottom">
          <div class="label">
            邮箱: <span class="value">{{ myInfo.email }}</span>
          </div>
          <div class="label">
            博客: <span class="value">{{ myInfo.blogUrl.slice(0, 10) + '...' }}</span>
          </div>
        </div>
      </div>
      <div class="setting">
        <van-icon name="setting-o" size="22" />
      </div>
    </div>
    <div class="my-desc">
      <van-text-ellipsis rows="5" :content="myInfo.desc" expand-text="展开" collapse-text="收起" />
    </div>
  </div>
  <div class="body">
    <van-tabs v-model:active="active" swipeable line-height="2" line-width="70" :scrollspy="true">
      <van-tab title="今日数据">
        <div class="main">
          <div class="date-list-grid">
            <div class="table-head">
              <div class="data-item" v-for="(item, index) in dataWeek" :key="index + 1">
                {{ item }}
              </div>
            </div>
            <div class="table-body">
              <div
                class="box completed"
                v-for="(item, index) in monthData"
                :key="index + 1"
                :class="computedSignStyle(item)"
              ></div>
            </div>
          </div>
          <div class="today-plan">
            <TodayPlan />
          </div>
          <div class="chart"></div>
        </div>
      </van-tab>
      <van-tab title="历史记录"></van-tab>
    </van-tabs>
  </div>
</template>

<script setup>
import { getMonthDoTaskService } from '@/api/Plan'
import TodayPlan from '@/components/TodayPlan.vue'
import { onMounted, ref } from 'vue'

const myInfo = ref({
  name: '张三',
  sex: 1,
  email: '1973578950@qq.com',
  blogUrl: 'https://butvan.cn',
  desc: '一个正在学习前端和后端的大一学生,喜欢折腾各种技术,对一些3d游戏引擎也比较感兴趣,希望我的博客能给你带来一些帮助。',
})

const active = ref(0)
const dataWeek = ref(['周一', '周二', '周三', '周四', '周五', '周六', '周日'])

// const daysInCurrentMonth = new Date(
//   new Date().getFullYear(),
//   new Date().getMonth() + 1,
//   0
// ).getDate() // 每个月有多少天
// let firstDayOfMonth = new Date(new Date().getFullYear(), new Date().getMonth(), 1).getDay() // 本月一号是星期几， 0 -> 星期天
// const monthData = Array(35).fill(0)
// // 从1号对应的星期几开始填充1
// const computedDays = () => {
//   if (firstDayOfMonth === 0) {
//     firstDayOfMonth = 7
//   }
//   for (let i = firstDayOfMonth - 1, day = 1; day <= daysInCurrentMonth; i++, day++) {
//     monthData[i] = 1
//   }
// }

const monthData = ref([])

const computedSignStyle = (item) => {
  switch (item) {
    case -1:
      return 'empty-day'
    case 1:
      // 签到
      break
    case 0:
      // 未签到
      return 'no-sign'
  }
}

const getUserMonthTodayTask = async () => {
  const { data } = await getMonthDoTaskService()
  monthData.value = data
}
onMounted(() => {
  // computedDays()
  getUserMonthTodayTask()
})
</script>

<style lang="scss" scoped>
.my-info {
  min-height: 10vh;
  padding: 20px 10px;
  background-size: cover !important;

  .header {
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;

    .avator {
      border: 1.5px solid #fff;
    }

    .info {
      color: #fff;
      .label {
        font-size: 14px;
        font-weight: 600;
        .value {
          font-size: 12px;
          font-weight: 500;
        }
      }

      .top {
        display: flex;
        gap: 20px;
        height: 30px;
        line-height: 30px;
      }

      .bottom {
        display: flex;
        gap: 10px;
      }
    }

    .setting {
      position: absolute;
      right: 0px;
      top: 0px;
      color: #32c5ff;
    }
  }

  .my-desc {
    font-family: '快乐体';
    font-size: 16px;
    margin: 10px 0px;
    text-indent: 2em;
    letter-spacing: 2px;
    color: #e9ebec;
  }
}

.body {
  min-height: 100vh;
  background-color: #edf8ff;
  padding: 10px;

  :deep(.van-tabs__nav) {
    background: transparent !important;
  }

  .main {
    .date-list-grid {
      margin-top: 15px;
      height: 200px;
      background-color: #fff;
      border-radius: 7px;

      .table-head {
        height: 17%;
        display: flex;
        align-items: center;
        justify-content: space-around;
        border-bottom: 0.5px solid;
      }

      .table-body {
        padding-top: 5px;
        height: 80%;
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        grid-template-rows: repeat(5, 1fr);

        .box {
          margin: 0 auto;
          width: 17px;
          height: 17px;
          background-color: #c2bfbf;
          border-radius: 2px;
        }
      }
    }

    .today-plan {
      margin: 15px 0px;
      height: 200px;
      background-color: #fff;
      border-radius: 7px;
    }

    .chart {
      height: 200px;
      background-color: #fff;
      border-radius: 7px;
    }
  }
}

.completed {
  background-color: #ade79b !important;
}
.empty-day {
  visibility: hidden;
  border: none;
}
.no-sign {
  background-color: #c2e5f0 !important;
}
</style>